<template>
  <div class="box">
    <div class="top">
      <van-nav-bar
        title="分类"
        left-text=""
        left-arrow
        @click-left="onClickgo"
      />
    </div>
    <div class="mian">
      <div calss="left">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item title="推荐" @click="onClickLeft()" />
          <van-sidebar-item
            :title="item"
            v-for="(item, index) in KindList"
            :key="index"
            @click="onClickRight(item, index)"
          />
        </van-sidebar>
      </div>
      <div class="right" v-if="IsShow">
        <van-grid :column-num="4">
          <van-grid-item
            v-for="(item, index) in kindbrand"
            :key="index"
            :icon="item.img1"
            :text="item.brand"
            @click="onkind(item.brand, index)"
          >
          </van-grid-item>
          
        </van-grid>
        <!-- <van-grid :column-num="4">
          <van-grid-item
            v-for="(item, index) in getHpo"
            :key="index"
            :icon="item.img1"
            :text="item.brand"
          >
          </van-grid-item>
          
        </van-grid> -->

        <Son :xiaoming="getHpo"></Son>
      </div>
      <div class="right1" v-else>
        <van-grid :column-num="3">
          <van-grid-item
            v-for="(item, index) in hotlist"
            :key="index"
            :icon="item.img1"
            :text="item.brand"
            @click="godetail(item.proid)"
          >
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import Son from "../components/MyKindd/son.vue";
import {
  GetKindList,
  Getbrandlist,
  // Getphoto,
  GetHotListData,
  Getphotolist,
} from "../request/api";
export default {
  data() {
    return {
      activeKey: 0,
      // 分类列表
      KindList: [],
      // 分类列表品牌
      kindbrand: [],
      // 热门列表数据
      hotlist: [],
      nn: "洛基亚",
      IsShow: false,
      getHpo: [],
    };
  },
  methods: {
    godetail(proid){
       this.$router.push("/detail/" + proid);
    },
    onClickgo() {
      this.$router.go(-1);
    },
    onCl() {
      console.log(this.getHpo);
    },
    onClickLeft() {
      this.IsShow = false;
    },
    gethp() {
      console.log(this.getHpo)
       this.ge=JSON.parse(JSON.stringify(this.getHpo));  

      console.log(this.ge);
    },
    onkind(brand, index) {
      // console.log(item,index)
      console.log(index);
      console.log(brand);
      Getphotolist({
        category: localStorage.getItem("category"),
        brand: brand,
      }).then((res) => {
        console.log(res.data.data);
        this.getHpo = JSON.parse(JSON.stringify(res.data.data));
        console.log(res.data.data)
        this.getHpo.map((item) => {
          item.show = false;
        });
        console.log(this.getHpo)
      });
    },
  

    // 品牌列表
    onClickRight(item, index) {
      this.IsShow = true;
      Getbrandlist({ category: item }).then((res) => {
        console.log(res.data.data);
        this.kindbrand = res.data.data;
        console.log(this.KindList[index]);
        localStorage.setItem("category", this.KindList[index]);
      });

      // console.log(res)
    },
  },
  // 分类列表
  created() {
    GetKindList().then((res) => {
      this.KindList = res.data.data;
    });
    GetHotListData().then((res) => {
      this.hotlist = res.data.data;
      this.IsShow = false;
    });
  },
  components: {
    Son,
  },
};
</script>

<style scoped>
.mian {
  display: flex;
}
.right {
  height: 2rem;
  z-index: 1000;
}
.right p {
  height: 20%;
}
</style>